<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html> 
<head> 
	<title>Home</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href='<c:url value="/styles/jquery.mobile-1.2.0.min.css"/>'/>
	<script src='<c:url value="/scripts/jquery-1.8.2.min.js"/>'></script>
	<script src='<c:url value="/scripts/jquery.mobile-1.2.0.min.js"/>'></script>
	<script type="text/javascript" src='<c:url value="/fusioncharts/js/FusionCharts.js"/>'></script>
	<script type="text/javascript" src='<c:url value="/fusioncharts/js/FusionCharts.jqueryplugin.js"/>'></script>
	<style>
	.center-wrapper{
		text-align: center;
	}
	.ui-grid-a img{
		width:100%;
		height:auto;
		margin:10px;
	}
	.ui-grid-a div{
		padding:10px;
	}
	.imgCaption{
		width:100%;
		text-align:center;
		font-size:12px;
		margin-top:-20px;
	}
	.ui-page {
		background-image:url(<c:url value='/images/bg.png'/>);
		background-size:cover;  
	}
	</style>
	<script type="text/javascript">
	$('.ui-page').live("pagecreate", function() {
		$('.ui-content').height($(window).height()*0.8);
   	});
	(function($, undefined) {
	    $.fn.subpage = function(options) {
	        $(document).bind(
	            "pagechange",
	            function() {
	                var forword = $.mobile.urlHistory.getNext();
	                if (forword) {
	                    var dataUrl = forword.url;
	                    var forwordPage=$.mobile.pageContainer
	                            .children(":jqmData(url='" + dataUrl + "')");
	                    if(forwordPage){
	                        forwordPage.remove();
	                    }
	                }
	                $.mobile.urlHistory.clearForward();
	            });
	    };
	    $(document).bind("pagecreate create", function(e) {
	        $(":jqmData(role='page')", e.target).subpage();
	    });
	})(jQuery);
	</script>
</head> 
<body> 
<div id="main" data-role="page" data-dom-cache="true">
	<div data-role="header" data-position="fixed">
		<h1>Home</h1>
	</div><!-- /header -->
	<div data-role="content">		
		<div class="ui-grid-a">
			<!-- 1st row -->
            <div class="ui-block-a">
            	<a href="<c:url value='/pages/user/list2.jsp'/>?req_id=NongKeReXian"><img src='<c:url value="/images/barcode_reader.png"/>'/></a>
            	<div class="imgCaption">近期项目</div>
            </div>
            <div class="ui-block-b">
            	<a href="tel:15921276637"><img src='<c:url value="/images/bwbd.png"/>'/></a>
            	<div class="imgCaption">农科热线</div>
            </div>
            <div class="ui-block-a">
            	<a href="#page2"><img src='<c:url value="/images/expert.png"/>'/></a>
            	<div class="imgCaption">Schedule</div>
            </div>
            <div class="ui-block-b">
            	<a href="#page2"><img src='<c:url value="/images/phonebook.png"/>'/></a>
            	<div class="imgCaption">Schedule</div>
            </div>
            <div class="ui-block-a">
            	<a href="#page2"><img src='<c:url value="/images/nyjs.png"/>'/></a>
            	<div class="imgCaption">Schedule</div>
            </div>
            <div class="ui-block-b">
            	<a href="#page2"><img src='<c:url value="/images/tdxt.png"/>'/></a>
            	<div class="imgCaption">Schedule</div>
            </div>
        </div>
	</div><!-- /content -->
	<div data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
        <a data-role="button" class="ui-btn-left" data-icon="back">
            Sign Out
        </a>
        <a data-role="button" href="#page1" class="ui-btn-right" data-icon="home">
            Menu
        </a>
    </div>
</div><!-- /page -->
</body>
</html>